<template>
  <div class="header">
    <div class="img">
      <img src="./image/sousuo.png" alt />
    </div>
    <input type="text" placeholder="搜索菜谱、食材" v-model="goback" @keyup.enter="fn" />
  </div>
</template>
<script>
export default {
  props: {},
  data: () => ({
    arr:[],
    tags:[],
    goback:''
  }),
  components: {},
  mounted() {},
  updated() {},
  methods: {
    fn() {
      this.$router.push('/menu/'+this.goback)
      if (this.title) {
        this.$router.replace(`/menu/${this.tags}?title=${this.title}`);
      }
      
    }
  }
};
</script>


<style scoped>
.header {
  background: #fff;
  border-radius: 1.25rem;
  padding-left: 0.625rem;
  border: 1px solid #999;
  height: 2.375rem;
  position: relative;
}
.img {
  width: 1.5625rem;
  height: 1.5625rem;
  display: block;
  border-right: none;
  padding-top: 0.3125rem;
  padding-bottom: 0.375rem;
}
img {
  width: 75%;
  height: 75%;
  margin-top: 0.3125rem;
}
input {
  width: 14.75rem;
  height: 100%;
  font-size: 0.875rem;
  border-left: none;
  outline: none;
  position: absolute;
  bottom: 0;
  left: 1.875rem;
}
</style>